<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>锤子商城-周洪民-详情页</title>
   <link rel="stylesheet" href="/css/detailsPage.css">
</head>

<body>
   <header></header>
   <div id="shopNum">
      <img src="/images/shop.png" alt="">
      <span id="shopNum-num">0</span>
   </div>
   <main id="buyShop">
     
   </main>
   <!-- 模板 -->
   <script type="text/html" id="buyShopTemplate">
      <div class="left">
         <ul class="smallPic">
            {{each list[0].shop_info.ali_images img index}}
            <li class="smallImg" data-index = {{index}}>
               <img
                  src="{{img}}"
                  alt=""
                  data-index = {{index}}
                  >
            </li>
            {{/each}}        
         </ul>
         <div  class="bigPic">
            <div class="mask">

            </div>
            {{each list[0].shop_info.ali_images img1}}
           
            <img
            src="{{img1}}"
            alt=""
            class='bigImg'
            >
            {{/each}}
         </div>
         <div class="bestPic">
            {{each list[0].shop_info.ali_images img2}}
            <img src="{{img2}}" alt="" class='bestImg'>
            {{/each}}
         </div>
      </div>
      <!-- right -->
      <div class="right">
         <ul class="content">
            <li class="one">
               <div class="title">
                  <h2 id='title'>{{list[0].shop_info.title}}</h2>
                  <p>{{list[0].shop_info.sub_title}}</p>
               </div>
               <div class="price">
                  <h3>￥{{(list[0].price).toFixed(2)}}</h3>
                  <del><b></b></del>
               </div>
            </li>
            <li>
               <h4>促销活动</h4>
               <span class="littleBox">直降</span>
               <p>官方自营 好物提前抢</p>
            </li>
            <li>
               <h4 class='colorText'>颜色选择</h4>
               <div class="colorSelect">
               {{each list[0].spu.sku_info item}}
               {{if item.spec_json[0].image}}
               <a  data-id="{{item.sku_id}}" class='noA'><span class='btn' data-id={{item.sku_id}}><img src="{{item.spec_json[0].image}}" alt=""></span></a>
               {{else}}
               <a  data-id ='{{item.sku_id}}' class='noA'><span class='btn btn-text' data-id={{item.sku_id}}>{{item.spec_json[0].item_value}}</span></a>
               {{/if}}
               {{/each}}
               </div>
            </li>
            <li>
               <h4>数量选择</h4>
               <span class="btn1" id="sub">-</span>
               <input type="text" value="1" class="num" id="num">
               <span class="btn1" id="add">+</span>
            </li>
            <li>
               <h4>服务说明</h4>
               <p>* 满99元包邮</p>
            </li>
         </ul>
      </div>
   </script>
   <!-- 下方详情 -->
   <div class="longImg" id="longImg">
     
   </div>
   <script type="text/html" id="longImgTemplate">
      <div class="longImg-top">
         <h2>产品信息</h2>
      </div>
     
      <img src="{{list[0].shop_info.tpl_content.base.images.ali_mobile.url[0]}}" alt="">
     
   </script>
   <!-- 支付部分 -->
   <footer id="pay">
      
   </footer>
   <script type="text/html" id="payTemplate">
      <div class="center">
         <div class="center-left">
            <span>
               <p>您已选择了</p><b class="title">{{list[0].shop_info.title}}</b> x <b class="num" id='count'>1</b>
               {{if list[0].attr_info[1]}}
               <p class="color">{{list[0].attr_info[1].value}}</p>
               {{else}}
               {{each list[0].attr_info value}}
               <p class='color'>{{value.value}}</p>
               {{/each}}
               {{/if}}
            </span>
         </div>
         <div class="center-right">
            <b class="price" id="price">￥{{(list[0].price).toFixed(2)}}</b>
            <del></del>
            <button class="buy">现在购买</button>
            <button class="goBuyShop" id="goBuyShop">加入购物车</button>
         </div>
      </div>
   </script>
   <script src="/libs/require.js" data-main='/js/detailsPage.js'></script>
</body>

</html>